<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五星</title>
    <style>
        .aaa{
            width: 827px;
            padding: 22px;
            border: 2px solid #E84E40;
            background: #fff;
            z-index: 200;
            margin: 50px auto;
            
        }
        h4{
            display: block;
            margin-block-start: 1.33em;
            margin-block-end: 1.33em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
            unicode-bidi: isolate;
            font-size: 18px;
            color: #333333;
            padding-bottom: 20px;
            border-bottom: 1px dashed #dbdbdb;
        }
        .aaa p {
            font-size: 14px;
            color: #999;
            line-height: 45px;
            margin-bottom: 0;
        }
        .bbb {
            font-size: 16px;
            color: #333;
            line-height: 40px;
            width: 809px;
            padding-left: 15px;
            background: #f3f3f3;
            margin-bottom: 25px;
            margin-top: 20px;
        }
        ul {
            list-style: none;
            padding: 0;
        }
        ul span {
            border: 2px solid #999;
            height: 40px;
            width: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 5px;
            cursor: pointer;
            color: #333; /* 初始颜色 */
            background-color: #fff; /* 初始背景色 */
        }
        ul span.selected {
            border: 2px solid #fa0000;
            color: red; /* 选中颜色 */
            background-color: #f3f3f3; /* 选中背景色 */
        }
        .ddd{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="aaa">
            <h4>给“新闻订单”的评价</h4>
            <p>请严肃认真对待此次评价哦！您的评价对我们真的真的非常重要！</p>
            <div id="hao">
                <!-- 渲染图片 -->
                <img v-for="(item, index) in wuxing"  
                     :src="item.img" 
                     :alt="item.name" 
                     @click="showName(index)">
                <!-- 显示被点击的图片名称 -->
                <div class="ddd" v-if="tup !== null">{{ wuxing[tup].name }}</div>
            </div>
            <div class="bbb">
                本次交易，乖，摸摸头 给您留下了什么印象呢？
            </div>
            <ul>
                <li v-for="(item, index) in list" :key="index">
                    <span 
                        @click="dian(index)"
                        :class="{ selected: biao.includes(index) }"
                    >
                        {{ item }}
                    </span>
                </li>
            </ul>
            <!-- 评论 -->
            <textarea v-model="text" @input="much" style="width: 818px; height: 118px;"></textarea>
            <p v-if="text.length <= total">剩余字数: {{ zzz }}/{{ total }}</p>
            <p v-else style="color: red;">已超出字数限制!</p>
        </div>
    </div>
</body>
<script src="vue.js"></script>
<script>
    const { createApp, ref, computed } = Vue;

    const app = createApp({
        setup() {
            const list = ref(['专业水平高', '交付准时', '效果明显', '数据分析准确', '能力待提高', '工期延误']);
            const biao = ref([]); // 存储当前选中的项的索引
            const tup = ref(null) // 当前选中的图片索引


            const dian = (index) => {
                if (biao.value.includes(index)) {
                    // 如果已经选中，则移除
                    biao.value = biao.value.filter(i => i !== index);
                } else {
                    // 否则添加到选中列表
                    biao.value.push(index);
                }
            }

            const showName = (index) => {
                tup.value = index;
                const secondImagePaths = [
                    './img/x2.png',
                    './img/x2.png',
                    './img/x2.png',
                    './img/x2.png',
                    './img/x2.png' 
                ];
                wuxing[index].img = secondImagePaths[index];
            }

            let wuxing=[
                {'name': '差评','img': './img/x1.png'},
                {'name': '较差','img': './img/x1.png'},
                {'name': '中等','img': './img/x1.png'},
                {'name': '一般','img': './img/x1.png'},
                {'name': '好评','img': './img/x1.png'},
            ]


            //评论
            const text = ref('');
            const total = 10;
            const zzz = computed(() => total - text.value.length);

            function much(event) {
                if (text.value.length >= total && event.inputType !== 'deleteContentBackward') {
                    event.preventDefault(); // 阻止继续输入
                    return;
                }
                // 允许输入时更新文本内容
                text.value = event.target.value;
            }

            return {
                list,
                biao,
                dian,
                wuxing,
                tup,
                showName,
                text,
                total,
                zzz,
                much
            };
        }
    }).mount('#app');

    // 星星：类似全选， 加上悬浮事件
    // 点第一个，           显示 差评
    // 点第二个，前一个全选，显示 差评
    // 点第三个，前两个全选，显示 较差
    // 点第四个，前三个全选，显示 中等
    // 点第五个，前四个全选，显示 好评
</script>
</html>
